<!--
 * @Description:BGP配置
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-08-26 10:07:13
 * @LastEditTime: 2021-11-17 13:32:42
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content" style="padding: 0">
    <table-bar
      :showTop="false"
      :layout="['search', 'column']"
      :columns="columns"
      @changeColumn="changeColumn"
    >
      <div slot="top">
        <el-form :model="filterSearch" label-width="100px" label-position="right">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 租户名称  请输入租户名称-->
              <el-form-item :label="$t('user.TenantName')">
                <el-input
                  v-model.trim="filterSearch.dgName"
                  :placeholder="$t('user.InputTenantName')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
              <!--搜索 重置-->
              <el-button type="primary" @click="search">{{$t('systerms.Search')}}</el-button>
              <el-button @click="reset">{{$t('systerms.Reset')}}</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
      <div slot="bottom">
        <!-- 刷新 -->
        <el-button size="medium" plain @click="reset">刷新</el-button>
        <!-- 新建 -->
        <el-button size="medium" type="primary" plain @click="handleCreate" v-power="2">新建</el-button>
      </div>
    </table-bar>
    <tao-table
      class="table-box"
      :data="dataList"
      :page="page"
      @changePage="changePage"
      :showPage="true"
      ref="table"
    >
      <!-- 详情 -->
      <el-table-column label="详情" type="expand" width="100">
        <template slot-scope="scope">
          <info :bgpInfo="scope.row" :tenantList="tenantList" />
        </template>
      </el-table-column>
      <el-table-column
        label="ID"
        align="center"
        width="100"
        sortable
        prop="id"
        v-if="columns[0].show"
      />
      <!-- 租户 -->
      <el-table-column
        label="租户名称"
        show-overflow-tooltip
        min-width="150"
        prop="dgId"
        align="center"
        v-if="columns[1].show"
      >
        <template slot-scope="scope">
          <!-- <span>{{returnDgName(scope.row.vrfId, tenantList)}}</span> -->
          <span>{{scope.row.vrfName}}</span>
        </template>
      </el-table-column>
      <!-- ipv6 VRF名称 -->
      <el-table-column
        label="VRF名称"
        show-overflow-tooltip
        min-width="150"
        prop="instanceName"
        align="center"
        v-if="ne.extAttrs.IPAddressMode !== 'V6' ? 0 : columns[2].show"
      >
        <template slot-scope="scope">
          <span>{{scope.row.instanceName}}</span>
        </template>
      </el-table-column>
      <!-- 本端AS -->
      <el-table-column
        label="本端AS"
        show-overflow-tooltip
        min-width="150"
        prop="localAs"
        align="center"
        v-if="ne.extAttrs.IPAddressMode !== 'V6'? columns[2].show : columns[3].show"
      ></el-table-column>
      <!-- 对端AS -->
      <el-table-column
        label="对端AS"
        show-overflow-tooltip
        min-width="150"
        prop="remoteAs"
        align="center"
        v-if="ne.extAttrs.IPAddressMode !== 'V6'? columns[3].show : columns[4].show"
      ></el-table-column>
      <!-- 对端IP -->
      <el-table-column
        label="对端IP"
        show-overflow-tooltip
        min-width="150"
        prop="remoteIp"
        align="center"
        v-if="ne.extAttrs.IPAddressMode !== 'V6'? columns[4].show : columns[5].show"
      ></el-table-column>
      <!-- 状态 -->
      <el-table-column
        label="状态"
        show-overflow-tooltip
        min-width="150"
        prop="state"
        align="center"
        v-if="ne.extAttrs.IPAddressMode !== 'V6'? columns[5].show : columns[6].show"
      ></el-table-column>
      <!-- 操作 -->
      <el-table-column fixed="right" align="center" label="操作" width="100px">
        <!-- 删除 -->
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color: #FA6962"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-power="scope.row.vrfId === $store.state.user.user.info.dgId ? 2 : 0"
          >删除</el-button>
        </template>
      </el-table-column>
    </tao-table>
    <forms
      v-if="dialogStatus"
      :ne="ne"
      :vrfList="vrfList"
      :tenantList="tenantList"
      :dialogStatus="dialogStatus"
      @handleDialog="handleDialog"
    ></forms>
  </div>
</template>

<script>
import forms from './forms.vue';
import info from './info.vue';
export default {
  props: ['ne'],
  components: { info, forms },
  data () {
    return {
      dataList: [],
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      // columns: [
      //   { name: 'ID', show: true },
      //   { name: '租户名称', show: true },
      //   { name: '本端AS', show: true },
      //   { name: '对端AS', show: true },
      //   { name: '对端IP', show: true },
      //   { name: '状态', show: true }
      // ],
      // 行内数据
      lineRow: {},
      dialogStatus: false,
      filterSearch: {
        dgName: ''
      },
      vrfList: []
    };
  },
  watch: {},
  computed: {
    columns: function() {
      if (this.ne.extAttrs.IPAddressMode === 'V6') {
        return [
          { name: 'ID', show: true },
          { name: '租户名称', show: true },
          { name: 'VRF名称', show: true },
          { name: '本端AS', show: true },
          { name: '对端AS', show: true },
          { name: '对端IP', show: true },
          { name: '状态', show: true }
        ];
      } else {
        return [
          { name: 'ID', show: true },
          { name: '租户名称', show: true },
          { name: '本端AS', show: true },
          { name: '对端AS', show: true },
          { name: '对端IP', show: true },
          { name: '状态', show: true }
        ];

      }
    }
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.getVrfList();
      _this.getTenantList();
      _this.refresh();
    });
  },
  methods: {
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
    // 获取租户信息
    getTenantList () {
      let _this = this;
      let type = _this.ne.neLayer;
      _this.tenantList = [];
      if (type === 'Mixed') {
        //  pop端获取所有的租户
        let _this = this;
        let params = {
          limit: -1,
          offset: 0,
          neId: this.ne.id,
          vrfId: this.ne.dgId
        };
        _this.$http.post({
          url: '/api/sdwan/bgp/getDomainGroupListByVrfId',
          data: params
        }).then(res => {
          let { status, resultBody } = res;
          let arry = [];
          if (status === '0') {
            if (resultBody.length > 0) {
              for (let i = 0; i < resultBody.length; i++) {
                arry.push({
                  label: resultBody[i].userlabel,
                  value: resultBody[i].id
                });
                _this.tenantList = arry;
              }
            }
          }
        });
      } else {
        // cpe端获取当前网元所属租户
        let arry = [];
        arry.push({
          label: _this.ne.extAttrs.dgName,
          value: _this.ne.dgId
        });
        this.tenantList = arry;
      }
    },
    // 获取VrF名称
    getVrfList () {
      let _this = this;
      let params = {
        limit: 10000,
        offset: 0,
        dgId: _this.ne.dgId
      };
      _this.$http.post({
        url: '/api/sdwan/vpn/query',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.vrfList = resultBody.objects;
        }
      });
    },
    // 返回租户名称
    returnDgName (dgId, tenantList) {
      for (let i = 0; i < tenantList.length; i++) {
        if (dgId === tenantList[i].value) {
          return tenantList[i].label;
        }
      }
    },
    // 搜索
    search () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 刷新
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.filterSearch = {
        dgName: ''
      };
      _this.refresh();
    },
    refresh () {
      let _this = this;
      let params = {
        neId: _this.ne.id,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      if (_this.filterSearch.dgName) {
        params.keyword = _this.filterSearch.dgName;
      }
      _this.$http.post({
        url: '/api/sdwan/bgp/query',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.page.total = resultBody.count;
          _this.dataList = resultBody.objects;
        }
      });
    },
    // 创建bgp
    handleCreate () {
      let _this = this;
      if (_this.ne.neLayer === 'Mixed') {
        // POP 超级管理员可以有多个租户 但非超级管理员只有一个
        if (_this.$store.state.user.user.info.dgId !== 100000 && _this.dataList.length !== 0) {
          _this.$message.error('请先删除已存在的BGP配置后再进行创建！');
          return;
        } else {
          _this.dialogStatus = true;
        }
      } else {
        // CPE 只有一个BGP配置
        if (_this.dataList.length !== 0) {
          _this.$message.error('请先删除已存在的BGP配置后再进行创建！');
          return;
        } else {
          _this.dialogStatus = true;
        }
      }

    },
    // 删除bgp
    handleDelete (row) {
      let _this = this;
      let params = {
        id: row.id,
        neId: row.neId,
        siteId: row.siteId,
        dgId: row.dgId,
        localAs: row.localAs,
        remoteAs: row.remoteAs,
        remoteIp: row.remoteIp,
        routerId: row.routerId,
        keepAliveTime: row.keepAliveTime,
        holdTime: row.holdTime,
        network: row.network,
        defaultOriginate: row.defaultOriginate,
        staticed: row.staticed,
        connected: row.connected,
        vrfId: row.vrfId,
        ingressItems: row.ingressItems,
        egressItems: row.egressItems
      };
      _this.$confirm('您确定要删除当前数据吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        _this.$http.deleted({
          url: '/api/sdwan/bgp',
          data: params
        }).then(res => {
          let { status } = res;
          if (status === '0') {
            _this.$message.success('删除成功！');
            _this.refresh();
            _this.getTenantList();
          }
        });
      }).catch(() => {
        _this.$message.info('取消删除');
      });
    },
    // 新建BGP的回调
    handleDialog (data) {
      let _this = this;
      _this.dialogStatus = data;
      _this.getTenantList();
    }
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  .table-top {
    margin-bottom: 15px;
  }
  .table-box {
    ::v-deep .el-button {
      padding: 0;
    }
    ::v-deep .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
  }
}
</style>
